<template>
	<view class="pageview flex flex-direction">
		<zx-nav title="分类选择商品" bg="#fff" fixedTop></zx-nav>
		<div class="flex flex-sub" style="min-height: 0; position: relative">
			<scroll-view class="menu" scroll-y scroll-with-animation>
				<view v-for="(item, index) in menulist" :key="index" class="tab-bar-item" :class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="swichNav">
					<text :style="{ color: item.color }">{{ item.name }}</text>
				</view>
			</scroll-view>
			<div class="flex-sub tab-view">
				<div style="position: absolute;"><filterbar @changeFilrer="changeFilrer"></filterbar></div>
				<mescroll-uni :top="60" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit" :fixed="false">
					<view class="menulist flex flex-wrap">
						<view class="menu-item" v-for="(item, index) in goodslist" :key="index" @tap="selctProduct(item)">
							<div class="imgbox">
								<image :src="item.img_url + '?imageView2/0/w/180'" mode="widthFix"></image>
							</div>
							<p class="text-cut">{{ item.name }}</p>
							<p class="price">{{ item.min_price }}~{{ item.max_price }}</p>
						</view>
					</view>
				</mescroll-uni>
			</div>
		</div>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState, mapMutations, mapActions } from 'vuex';
import filterbar from '@/components/filterbar';
export default {
	data() {
		return {
			menulist: [],
			currentTab: 0,
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			cateId: '',
			goodslist: [],
			downOption: {
				auto: false // 不自动加载
			},
			upOption: {
				auto: false, // 不自动加载
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 21 // 每页数据的数量
				}
			},

			isInit: false,
			sales: '',
			avg_price: '',
			color: '',
			isShowFilter: false,
			colorList: [],
			curColor: '',
			tabIndex: 0,
			stock_by: '',
			sales_by: '',
			cateIndex: 0,
			allmenulist: [],
			CustomBar: 60,
			StatusBarHeight: 20,
			filter: {}
		};
	},
	components: { filterbar },
	mixins: [MescrollMixin],
	computed: {
		...mapState(['memberId', 'currentLocation', 'hasLogin', 'greenCard'])
	},
	watch: {
		currentLocation(newVal, oldVal) {
			if (newVal != oldVal && newVal) {
				this.getCateList();
			}
		}
	},
	created() {
		this.getCateList();
	},
	onLoad() {
		var n = uni.getSystemInfoSync();
		let navBar = 'ios' == n.platform ? 44 + n.statusBarHeight : 48 + n.statusBarHeight;
		this.StatusBarHeight = n.statusBarHeight;
		this.CustomBar = navBar;
	},
	onShow() {},
	methods: {
		swichNav(e) {
			let cur = e.currentTarget.dataset.current;
			if (this.currentTab == cur) {
				return false;
			} else {
				this.currentTab = cur;
				let cateId = this.menulist[this.currentTab].id;
				this.cateId = cateId;
				this.$nextTick(() => {
					this.goodslist = [];
					this.mescroll.resetUpScroll();
					this.mescroll.scrollTo(0, 0);
				});
			}
		},
		scroll: function (e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
			this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序 (mescroll-mixins.js)
			// 自动加载当前tab的数据
			if (!this.isInit && this.menulist.length > 0 && this.cateId) {
				this.isInit = true; // 标记为true
				this.mescroll.resetUpScroll();
			}
		},
		upCallback() {
			this.getProductList();
		},
		/* 获取商品分类 */
		getCateList() {
			this.$postAction(this.$api.getCateList, null, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				if (da.code == 0) {
					this.menulist = [...da.data];
					let cateId = this.menulist[this.currentTab].id;
					this.cateId = cateId;
					console.log('cateId', this.cateId);
					if (!this.isInit && this.mescroll) {
						this.isInit = true; // 标记为true
						this.mescroll.triggerUpScroll();
					}
				}
			});
		},
		changeFilrer(param) {
			this.filter = {};
			if (param && Object.keys(param).length > 0) {
				for (var key in param) {
					if (param[key]) {
						if (key == 'color') {
							this.filter['product_color'] = param[key];
						} else {
							this.filter['order_by_type'] = param[key];
							this.filter['order_by'] = key;
						}
					}
				}
			}

			this.$nextTick(() => {
				// let num = this.menulist[this.currentTab].count >= 6 ? 6 : this.menulist[this.currentTab].count;
				// let goodslist = [];
				// for (var i = 0; i < num; i++) {
				// 	goodslist.push({
				// 		skeleton: true
				// 	});
				// }
				// this.goodslist = [...goodslist];
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			});
		},
		/* 获取产品 */
		getProductList() {
			let $me = this;
			let pageNum = this.mescroll.num || 1; // 页码, 默认从1开始
			let pageSize = this.mescroll.size || 21;
			let param = {
				page: pageNum,
				limit: pageSize,
				...this.filter
			};
			let url = this.$api.getProductTypeList;
			param.class_id = this.cateId || '';
			this.$postAction(url, param, {
				custom: {
					ShowLoading: false
				}
			})
				.then(da => {
					if (da.code == 0 && da.data && da.data.length > 0) {
						let curPageData = da.data;
						$me.mescroll.endBySize(curPageData.length, da.count);
						if ($me.mescroll.num == 1) $me.goodslist = []; //如果是第一页需手动制空列表
						$me.goodslist = $me.goodslist.concat(curPageData); //追加新数据
					} else {
						$me.goodslist = [];
						$me.mescroll.endSuccess(0, false);
					}
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		},
		selctProduct(info) {
			let pages = getCurrentPages();
			let prePage = pages[pages.length - 2];
			prePage.$vm.product = info;
			uni.navigateBack({
				delta: 1
			});
		},

		//跳转页面
		href(item) {
			if (item.url) {
				uni.navigateTo({
					url: item.url
				});
			}
		}
	},
	/* 用来设置 样式 /deep/ 起效 */
	options: {
		styleIsolation: 'shared'
	}
};
</script>
<style scoped>
@import './modal.css';
</style>
<style lang="scss" scoped>
page,
.pageview {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
	background: #fff;

	.menu {
		height: 100%;
		width: 180upx;
		background: #f3f4f5;
		text-align: center;

		.tab-bar-item {
			line-height: 92upx;
			color: #000;
			font-size: 26upx;
			background: #f3f4f5;

			&.active {
				color: #232323;
				background: #fff;
				font-weight: bold;
				font-size: 28upx;
				position: relative;

				&::before {
					content: '';
					display: block;
					width: 6upx;
					height: 92upx;
					position: absolute;
					background: #fe5608;
					left: 0;
					top: 0;
				}
			}
		}
	}

	.top-wrap {
		position: relative;
		z-index: 999;

		.tabs {
			padding: 10upx 25upx 0;
			width: 75%;

			::v-deep .app-tabs {
				background: transparent;
			}
		}
	}

	.tab-view {
		height: 100%;
		overflow: auto;
		position: relative;

		.classfilterbar {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			padding: 0 20upx;
			z-index: 999;
			background: #fff;

			span {
				height: 60upx;
				background: #f4f5f6;
				border-radius: 4upx;
				color: #232323;
				font-size: 26upx;

				& + span {
					margin-left: 16upx;
				}

				&.active {
					color: #fe5608;
				}
			}

			image {
				width: 10upx;
				margin-left: 10upx;
				display: inline-block;
				vertical-align: middle;
			}

			& > .filter {
				image {
					width: 26upx;
				}
			}
		}

		.menulist {
			padding: 20upx;

			.menu-item {
				text-align: center;
				color: #424242;
				font-size: 24upx;
				width: 31%;
				margin-bottom: 40upx;

				p {
					margin: 20upx 0 10upx;
				}

				.imgbox {
					width: 100%;
					padding-top: 100%;
					position: relative;
					border-radius: 8upx;

					image {
						display: block;
						width: 100%;
						border-radius: 8upx;
						position: absolute;
						top: 0;
					}
				}

				&:nth-child(3n + 2) {
					margin: 0 3.5%;
				}

				.price {
					padding: 0 10upx;
					color: #fe5608;
					font-size: 22upx;
					margin: 0;
				}
			}
		}

		.list {
			margin: 0;
			padding: 0 16upx;
			background: #fff;
			border-radius: 4upx;
			overflow: hidden;
		}
	}

	.tab-nav {
		background: #fff;
		border-radius: 20upx 20upx 0px 0px;
		padding: 0 35upx;
		text-align: center;
		font-size: 30upx;
		color: #171717;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;

		.filterbar {
			padding-top: 24upx;
			padding-bottom: 20upx;
			color: #717171;

			.active {
				color: #ff7d26;
				font-weight: bold;
			}

			image {
				width: 12upx;
				margin-left: 13upx;
			}
		}

		.nav {
			-webkit-mask: linear-gradient(to left, transparent 0%, #000 10%);
		}
	}

	.scrollview {
		line-height: 78upx;
		color: #000;
		font-weight: blod;
		font-size: 30upx;

		span {
			position: relative;
			display: inline-block;
			border-bottom: 4upx solid transparent;

			& + span {
				margin-left: 70upx;
			}

			&.active {
				color: #fc733b;
				font-weight: bold;
				border-bottom: 4upx solid #ff7d26;
			}
		}
	}
}

/* 筛选 */
.drawer-modal {
	text-align: left;

	.title {
		font-size: 30upx;
		color: #000;
	}

	.cu-tag {
		padding: 0 48upx;
		height: 60upx;
		margin: 20upx 1.5%;
		width: 22%;
	}

	.filterftbar {
		padding: 30upx 0;

		span {
			width: 150upx;
			height: 60upx;
			line-height: 60upx;
			color: #fc743b;
			border: 1px solid #fc743b;
			border-radius: 10upx;
			text-align: center;

			& + span {
				margin-left: 120upx;
				color: #fff;
				background-image: linear-gradient(90deg, #fe8c2d, #fe5504);
			}
		}
	}
}

::v-deep .app-tabs .tabs-item {
	font-size: 32upx;
	font-weight: bold;
}

zjtj-mod {
	display: block;
	width: 100%;
	height: 100%;
}
</style>
